<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>京东Home</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .jd{
            width: 1011px;
            height: 144px;
            margin:auto;
            border:1px solid #ccc;
            background: url("img2/jd.png");
        }
        .ad{
            height:800px;
            min-height:980px;
            margin:auto;
            border:1px solid red;
            position: relative;
        }
        .ad .title{
            z-index: 10;
            position: relative;
            height: 122px;
            background: url("img2/nav.png") no-repeat center/100% 100%;
        }
        .ad .con{
            position: absolute;
            left:0;
            top:80px;
            width:100%;
            height: 915px;
            background: url("img2/bg.jpg") no-repeat;
            padding-top: 20px;
        }
        .ad .con div{
            position: absolute;
        }
        .ad .con div.font{
            width: 621px;
            height: 202px;
            background: url("img2/font.png");
            top:50px;
        }
        .ad .con div.person{
            width: 900px;
            height: 800px;
            background: url("img2/person.png");
            top:300px;
        }
        .ad .con div.spring{
            top: 540px;
            width: 934px;
            height:536px;
            background: url("img2/spring.png");
        }
    </style>
</head>
<body>
<section class="jd"></section>
<section class="ad">
    <div class="title"></div>
    <div class="con">
        <div class="font">
        </div>
        <div class="person"></div>
        <div class="spring"></div>
    </div>
</section>
<section></section>
<script>
    /**
     * 系数的处理
     * absolute下元素对齐方法
     * oAd.offsetWidth-aDiv[i].offsetWidth)/2
     * */
    var oAd=document.querySelector(".ad");
    var aDiv=document.querySelectorAll(".con div");
    var oFont=document.querySelector(".font")
    var oPerson=document.querySelector(".person");
    var oSpring=document.querySelector(".spring");
    var arr=[];
    for(var i=0;i<aDiv.length;i++){
        arr[i]=(oAd.offsetWidth-aDiv[i].offsetWidth)/2;
        aDiv[i].style.left=arr[i]+"px";
    }
    oAd.onmousemove=function (e) {
        var e=e||window.event;
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].style.left=arr[i]+e.clientX/100+"px";
        }
    }
</script>
</body>
</html>